<template>
<div class="container-wrapper">
  <div class="wholeContainer">
    <SearchPart @findIt="watchIt" />
    <button class="addBtn" @click="goAdd">新增帖子</button>
    <div class="contentContainer">
      <ForumHeader/>
      <div v-for="(forumIt,index) in forumList" :key="index">
        <ForumItem :forumIt="forumIt" />
      </div>
      <div class="paginationContainer">
        <el-pagination
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange"
          :current-page="pagination.p"
          :page-size="pagination.pageSize"
          layout="total,prev, pager, next,->,jumper,sizes"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import ForumItem from '../components/ForumItem.vue'
import ForumHeader from '../components/ForumHeader.vue'
import SearchPart from '../components/SearchPart.vue'
// 导入el-pagination
import { Pagination } from 'element-ui'

export default {
  name: 'Forum',
  components: {
    ForumItem,
    ForumHeader,
    SearchPart,
    [Pagination.name]: Pagination
  },
  data () {
    return {
      hideOnSinglePage: false,
      total: 200,
      pagination: {
        pageSize: 10,
        p: 1
      },
      forumList:[],
      errMsg:'',
      type:0,
      searchContent:''
    }
  },
  mounted(){
    this.$axios({
      method:'get',
      url:`/api/posts/page/${this.pagination.p}/${this.pagination.pageSize}`,
      headers:{
				'Content-Type':'application/json',
				'token':localStorage.getItem('token')
			}
    }).then(res=>{
      console.log(res)
      if(res.data.code==0){
        this.$message({
          type:'error',
          message:res.data.msg
        })
      }else{
        this.forumList = res.data.data.data
      }
      this.total = res.data.data.total

    })
  },
  methods:{
    handleCurrentChange(val){
      if(!this.type){
        this.pagination.p = val
        this.$axios({
          method:'get',
          url:`/api/posts/page/${val}/${this.pagination.pageSize}`,
          headers:{
            'Content-Type':'application/json',
            'token':localStorage.getItem('token')
          }
        }).then(res=>{
          console.log(res)
          if(res.data.code==0){
            this.$message({
              type:'error',
              message:res.data.msg
            })
          }else{
            this.forumList = res.data.data.data
          }
          this.$forceUpdate()

        })
      }else{
        this.pagination.p = val
        this.$axios({
          method:'get',
          url:`/api/posts/search/${this.searchContent}/${val}/${this.pagination.pageSize}`,
          headers:{
            'Content-Type':'application/json',
            'token':localStorage.getItem('token')
          }
        }).then(res=>{
          console.log(res)
          if(res.data.code==0){
            this.$message({
              type:'error',
              message:res.data.msg
            })
          }else{
            this.forumList = res.data.data.data
          }
          this.$forceUpdate()

        })
      }
      
    },
    handleSizeChange(val){
      if(!this.type){
          this.pagination.pageSize = val
          this.$axios({
            method:'get',
            url:`/api/posts/page/${this.pagination.p}/${val}`,
            headers:{
              'Content-Type':'application/json',
              'token':localStorage.getItem('token')
            }
          }).then(res=>{
            console.log(res)
            if(res.data.code==0){
              this.$message({
                type:'error',
                message:res.data.msg
              })
            }else{
              this.forumList = res.data.data.data
            }
            this.$forceUpdate()

          })
      }else{
        this.pagination.pageSize = val
        this.$axios({
          method:'get',
          url:`/api/posts/search/${this.searchContent}/${this.pagination.p}/${val}`,
          headers:{
            'Content-Type':'application/json',
            'token':localStorage.getItem('token')
          }
        }).then(res=>{
          console.log(res)
          if(res.data.code==0){
            this.$message({
              type:'error',
              message:res.data.msg
            })
          }else{
            this.forumList = res.data.data.data
          }
          this.$forceUpdate()

        })

      }
      
    },
    changePage (pager) { // 分页器回调
      this.$emit('change', pager)
    },
    emptyMsg(){
      this.errMsg = ''
    },
    watchIt(val){
      this.searchContent = val
      if(val.trim()!=''){
        this.pagination.p = 1
        this.pagination.page = 10
        this.$axios({
          method:'get',
          url: `/api/posts/search/${val}/${this.pagination.p}/${this.pagination.pageSize}`,
          headers:{
            'Content-Type':'application/json',
            'token':localStorage.getItem('token')
          }
        }).then(res=>{
          console.log(res)
          if(res.data.code==0){
            this.$message({
              type:'error',
              message:res.data.msg
            })
          }else{
            this.forumList = res.data.data.data
          }
          this.total = res.data.data.total
          this.$forceUpdate();
        })
        this.type=1
      }else{
        this.pagination.p = 1
        this.pagination.page = 10
        this.$axios({
          method:'get',
          url:`/api/posts/page/${this.pagination.p}/${this.pagination.pageSize}`,
          headers:{
            'Content-Type':'application/json',
            'token':localStorage.getItem('token')
          }
        }).then(res=>{
          console.log(res)
          if(res.data.code==0){
            this.$message({
              type:'error',
              message:res.data.msg
            })
          }else{
            this.forumList = res.data.data.data
          }
          this.total = res.data.data.total
          this.type=0
        })
      }
      
    },
    goAdd(){
      this.$router.push('/AddForum')
    }
  }
}
</script>

<style scoped>
.container-wrapper{overflow: hidden}
  *{
    background-color:#4b4b4b ;
  }
  .wholeContainer{
    /* 让页面显示全 */
    width: 100%;
    height: 100%;
    min-height: 880px;
    background-color: #4b4b4b;
    overflow-x:hidden ;
    overflow-y: scroll;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-right: 25px;
  }
  .contentContainer{
    width: 100%;
    height: 100%;
    padding-top: 20px;
    padding-bottom: 10px;
    background-color: #4b4b4b;
    
  }
  .infoConatiner{
        position: fixed;
        width: 100%;
        height: 100%;
    }
    .info{
        position: fixed;
        width: 20%;
        height: 40%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: rgba(0,0,0,0.8);
        color: white;
        border-radius: 15px;
        text-align: center;
    }
    .info_title{
        font-size: 2em;
        margin-top: 15%;
        width: 100%;
    }
    .info_msg{
        font-size: 1.4em;
        margin-top: 20%;
        padding-left: 10%;
        padding-right: 10%;
    }
    .info_btn{
        position: absolute;
        bottom:0;
        padding:5% 0;
        text-align: center;
        margin-top: 60%;
        border-radius: 15px;
        width: 100%;
        color: white;
        font-size: 1.2em;
        border-top: 1px solid white;
    }
    .info_btn:hover{
        background-color: rgba(255,255,255,0.2);
    }
    .addBtn{
      position: fixed;
      right: 3%;
      bottom: 5%;
      width: 100px;
      height: 100px;
      border-radius: 50px;
      background-color: #4b4b4b;
      border: 1px solid white;
      color: white;
      font-size: 1.1em;
      cursor: pointer;
    }
    .addBtn:hover{
      background-color: rgba(255,255,255,0.2);
    }
    .paginationContainer{
      width: 46%;
      margin-left: 27%;
      margin-top: 20px;
      height: auto;
    }
</style>
